/**
 * @file AdminHome.vue
 * @description 管理员首页组件，包含侧边栏和主要内容区
 * @created 2024-03-20
 */

<template>
  <div class="app-container">
    <!-- 调试信息 -->
    <div v-if="showDebug" class="debug-info">
      <p>当前用户: {{ userStore.userInfo?.username }}</p>
      <p>角色: {{ userStore.userInfo?.role }}</p>
      <p>权限模块: {{ userStore.permissions?.modules?.join(', ') || '无权限' }}</p>
      <button @click="refreshPermissions">刷新权限</button>
      <button @click="showDebug = false">关闭</button>
    </div>
    
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div class="logo">
        <h1>华侨大学</h1>
        <p>教学管理系统</p>
      </div>
      <nav class="nav-menu">
        <!-- 学院管理 - 所有角色 -->
        <PermissionControl module="college_management">
        <router-link to="/admin/home" class="nav-item">
          <span class="icon">🏫</span>
          学院管理
        </router-link>
        </PermissionControl>
        
        <!-- 用户管理 - 仅校级和院级管理员 -->
        <PermissionControl module="user_management">
        <router-link to="/admin/user" class="nav-item">
          <span class="icon">👥</span>
          用户管理
        </router-link>
        </PermissionControl>
        
        <!-- 教师管理 - 校级和班级管理员 -->
        <PermissionControl module="teacher_management">
          <router-link to="/admin/teacher" class="nav-item">
            <span class="icon">👩‍🏫</span>
            教师管理
          </router-link>
        </PermissionControl>
        
        <!-- 教学资源管理 - 校级和院级管理员 -->
        <PermissionControl module="resource_management">
        <router-link to="/admin/resources" class="nav-item">
          <span class="icon">📚</span>
            教学资源管理
        </router-link>
        </PermissionControl>
        
        <!-- AI决策辅助 - 校级管理员 -->
        <PermissionControl role="school_admin">
        <router-link to="/admin/ai-decision" class="nav-item">
          <span class="icon">🧠</span>
            AI决策辅助
        </router-link>
        </PermissionControl>
        
        <!-- 智能助手 - 所有角色 -->
        <PermissionControl module="ai_assistant">
        <router-link to="/admin/ai-assistant" class="nav-item">
          <span class="icon">💬</span>
            智能助手
        </router-link>
        </PermissionControl>

        <!-- 分隔线 -->
        <div class="nav-divider"></div>

        <!-- 退出登录按钮 -->
        <div class="nav-item logout-btn" @click="handleLogout">
          <span class="icon">🚪</span>
          退出登录
        </div>
      </nav>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/modules/user'
import { useRouter } from 'vue-router'
import PermissionControl from '@/components/PermissionControl.vue'
import { onMounted, ref } from 'vue'

const userStore = useUserStore()
const router = useRouter()
const showDebug = ref(true) // 默认显示调试信息

// 组件挂载时获取用户权限
onMounted(async () => {
  console.log('AdminHome 组件已挂载')
  console.log('当前用户信息:', userStore.userInfo)
  console.log('当前用户权限:', userStore.permissions)
  
  if (!userStore.isLoggedIn) {
    console.log('用户未登录，跳转到登录页')
    router.push('/login')
    return
  }
  
  // 如果没有权限信息，强制获取
  await refreshPermissions()
})

// 处理退出登录
const handleLogout = () => {
  // 显示确认对话框
  if (window.confirm('确定要退出登录吗？')) {
    // 清除用户状态
    userStore.logout()
    // 跳转到登录页
    router.push('/login')
  }
}

// 刷新权限信息
const refreshPermissions = async () => {
  try {
    console.log('正在获取权限信息...')
    await userStore.fetchPermissions()
    console.log('权限获取成功:', userStore.permissions)
    
    // 如果当前角色是school_admin但没有权限，添加默认权限
    if (userStore.userInfo?.role === 'school_admin' && 
        (!userStore.permissions?.modules || userStore.permissions.modules.length === 0)) {
      console.log('为校级管理员添加默认全部权限')
      userStore.setPermissions({
        modules: [
          'user_management',
          'college_management',
          'teacher_management',
          'resource_management',
          'ai_assistant',
          'innovative_teaching'
        ],
        actions: {
          user: ['view', 'add', 'edit', 'delete'],
          college: ['view', 'add', 'edit', 'delete'],
          teacher: ['view', 'add', 'edit', 'delete'],
          resource: ['view', 'add', 'edit', 'delete']
        }
      })
    }
  } catch (error) {
    console.error('获取权限失败:', error)
  }
}
</script>

<style scoped>
.app-container {
  display: flex;
  min-height: 100vh;
}

/* 调试信息样式 */
.debug-info {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 9999;
  font-size: 12px;
  max-width: 400px;
}

.debug-info p {
  margin: 5px 0;
}

.debug-info button {
  margin: 5px;
  padding: 3px 8px;
  background: #1890ff;
  border: none;
  color: white;
  border-radius: 3px;
  cursor: pointer;
}

.sidebar {
  width: 280px;
  background: #2c2c54;
  color: white;
  padding: 20px 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.logo {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.logo h1 {
  font-size: 28px;
  color: white;
  margin-top: 10px;
}

.logo p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

.nav-menu {
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 16px 30px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s;
  font-size: 18px;
  border-left: 4px solid transparent;
}

.nav-item:hover,
.nav-item.router-link-active {
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border-left-color: #e41e2b;
}

.nav-item .icon {
  font-size: 24px;
  margin-right: 15px;
  width: 30px;
  text-align: center;
}

.main-content {
  flex: 1;
  padding: 30px;
  background: #f6f8fa;
}

/* 添加一些动画效果 */
.nav-item {
  position: relative;
  overflow: hidden;
}

.nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav-item:hover::after {
  transform: scaleX(1);
}

/* 分隔线样式 */
.nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 15px 20px;
}

/* 退出登录按钮样式 */
.logout-btn {
  cursor: pointer;
  margin-top: 10px;
  color: #ff4d4f;
}

.logout-btn:hover {
  background: rgba(255, 0, 0, 0.1);
}

/* 添加响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 280px;
  }

  .nav-item span:not(.icon) {
    display: inline;
  }

  .logo h1, .logo p {
    display: block;
  }
}
</style> 